<template>
	<view>
		<view class="content">
			<view class="share-top"><img class="share-img" :src="poster" mode="widthFix" /></view>
			<view class="share-bot" @click="savePoster()">保存到本地</view>
		</view>
		<view class=""></view>
		<view class=""></view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				poster: '',
			}
		},
		onShow() {
			if (!this.$util.checkToken('/pages/property/collection/collection-code')) return;
		},
		methods: {
			//生成海报
			getGoodsPoster() {
				//活动海报信息
				this.$api.sendRequest({
					url: "/collection/api/shop/shopQRCode",
					data: {
						// page: this.share_url
					},
					success: res => {
						if (res.code == 0) {
							this.poster = this.$util.img(res.data.path);
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			// 保存海报到本地
			savePoster() {
				let _this = this;
				// #ifdef H5 
				_this.downloadIamge(_this.poster, 'image');
				// #endif

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE || APP
				_this.downloadImageOfMp(_this.poster)
				// #endif
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downloadImageOfMp(image) {
				let _this = this
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success() {
						_this.$common.successToShow('保存成功')
					},
					fail() {
						_this.$common.errorToShow('图片保存失败')
					}
				});
				// uni.downloadFile({
				// 	url: image,
				// 	success(res) {
				// 		uni.saveImageToPhotosAlbum({
				// 			filePath: res.tempFilePath,
				// 			success() {
				// 				_this.$common.successToShow('保存成功')
				// 			},
				// 			fail() {
				// 				_this.$common.errorToShow('图片保存失败')
				// 			}
				// 		});
				// 	},
				// 	fail() {
				// 		_this.$common.errorToShow('下载失败')
				// 	}
				// })

				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						// 先下载到本地
						uni.downloadFile({
							url: image,
							success(res) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success() {
										_this.$common.successToShow('保存成功')
									},
									fail() {
										_this.$common.errorToShow('图片保存失败')
									}
								});
							},
							fail() {
								_this.$common.errorToShow('下载失败')
							}
						})
					},
					fail() {
						//console.log('授权失败')
					}
				})
				// #endif
			}
		},
		onLoad() {
			this.getGoodsPoster();
		}
	}
</script>

<style>
	.share-top {
		padding: 30rpx;
	}

	.share-img {
		width: 100%;
	}

	.share-bot {
		margin-top: 34rpx;
		width: 690rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #FF6A00;
		border-radius: 36rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>